import * as THREE from "../lib/three.module.js";
import { parse } from 'qs';

import initSceneCamera from "./initSceneCamera";
import createGround from "./createGround";
import distinguishFileType from "./distinguishFileType";

import {
  // loaderFor3DM,
  // loaderFor3DS,
  fbxLoadModel,
  // glbLoadModel,
  // stlLoader,
  // objLoader,
  // plyLoader
} from "./loaderFuncMap";
import { getFitScaleValue, setScaleToFitSize, setPositionToFitGrid, setAxisDirection } from "./adaption";
import webGLControls from "./webGLControls";
import loadProgress from "./loadProgress";
import publicLoadCallback from './loaderFuncMap/publicLoadCallback';
import collectModalInfo from './collectModalInfo';

import createPanel from "./createPanel";

import notFound from './notFound';

class Simple3D {
  constructor({ modelPath, resourcePath, panel, infoPanel, progress, getModalInfo }) {
    this.camera = {};
    this.scene = {};
    this.renderer = {};
    this.controls = {};
    this.modelObject = {};
    this.skeleton = {};
    this.mixer = {};
    this.modelPath = modelPath;
    this.resourcePath = resourcePath;
    this.panel = panel; // '1' 渲染Panel 其他情况均不渲染
    this.infoPanel = infoPanel; // 规则同上
    this.container = "";
    this.clock = new THREE.Clock();
    this.progress = progress;
    this.getModalInfo = getModalInfo;
    this.modalType = '';
    this.dirLight = {};
    this.dirLightBack = {};
    this.mesh = {};

    this.initSceneCamera = initSceneCamera;
    this.createGround = createGround;
    this.distinguishFileType = distinguishFileType;
    this.webGLControls = webGLControls;

    this.fbxLoadModel = fbxLoadModel;
    // this.glbLoadModel = glbLoadModel;
    // this.loaderFor3DM = loaderFor3DM;
    // this.loaderFor3DS = loaderFor3DS;
    // this.stlLoader = stlLoader;
    // this.objLoader = objLoader;
    // this.plyLoader = plyLoader;
    this.publicLoadCallback = publicLoadCallback;

    this.setScaleToFitSize = setScaleToFitSize;
    this.getFitScaleValue = getFitScaleValue;
    this.setPositionToFitGrid = setPositionToFitGrid;
    this.setAxisDirection = setAxisDirection;

    this.collectModalInfo = collectModalInfo;

    this.createPanel = createPanel;
    this.loadProgress = loadProgress;

    this.notFound = notFound;

    this.onWindowResize = this.onWindowResize.bind(this);
    this.init = this.init.bind(this);
    this.animate = this.animate.bind(this);

    this.init();
    this.animate();
  }

  init() {
    this.container = document.createElement("div");
    document.body.appendChild(this.container);

    // 初始化场景和相机
    this.initSceneCamera();

    // 地板
    this.createGround();

    // 加载模型
    this.distinguishFileType();

    this.webGLControls();

    window.addEventListener("resize", this.onWindowResize);
  }

  onWindowResize() {
    this.camera.aspect = window.innerWidth / window.innerHeight;
    this.camera.updateProjectionMatrix();
    this.renderer.setSize(window.innerWidth, window.innerHeight);
  }

  animate() {
    requestAnimationFrame(this.animate);
    const delta = this.clock.getDelta();
    if (this.mixer && this.mixer.update) this.mixer.update(delta);
    this.renderer.render(this.scene, this.camera);
    this.controls.update();
  }
}

const progress = (percent) => {
  const loadingContainer = document.querySelector(".loading-container");
  if (percent === 'NaN%') return;
  if (percent === "100.0%") {
    loadingContainer.style.display = "none";
  } else {
    loadingContainer.style.display = "block";
    const loadingBar = document.querySelector(".loading-bar");
    const loadingTips = document.querySelector(".loading-tips");
    loadingBar.style.width = percent;
    loadingTips.innerHTML = percent;
  }
};

const getModalInfo = (info, isInfoPanel) => {
  if (isInfoPanel === '1') {
    const modalInfo = document.querySelector('.modalInfo');
    modalInfo.style.display = 'block';
    const {
      Animation,
      Ext,
      FileSize,
      HasUv,
      Texture,
      Triangles,
      Vertices,
    } = info;
    const animation = document.querySelector('.Animation');
    const extContainer = document.querySelector('.Ext');
    const fileSize = document.querySelector('.FileSize');
    const hasUV = document.querySelector('.HasUv');
    const textureContainer = document.querySelector('.Texture');
    const triangles = document.querySelector('.Triangles');
    const verticesContainer = document.querySelector('.Vertices');
    animation.innerHTML = Animation || '0';
    extContainer.innerHTML = Ext;
    fileSize.innerHTML = FileSize ? FileSize + 'MB' : '';
    hasUV.innerHTML = HasUv ? '有' : '无';
    textureContainer.innerHTML = Texture || '0';
    triangles.innerHTML = Triangles || '0';
    verticesContainer.innerHTML = Vertices || '0';
    window.sessionStorage.setItem('modal-info', JSON.stringify(info));
  }
};

const onload = function () {
  const { search } = window.location;
  let modelPath;
  let resourcePath;
  let panel = '0'; // 是否渲染 Panel
  let infoPanel = '0'; // 是否渲染 模型信息面板
  if (search) {
    const params = search.substring(1);
    const res = parse(params);
    modelPath = res.path;
    resourcePath = res.source;
    panel = res.panel;
    infoPanel = res.infoPanel;
  }
  // ?path=https://test-dam-feiyuantu.oss-cn-beijing.aliyuncs.com/vdam-php/three-dimensional/111129/D10451612143391333.FBX&panel=1&infoPanel=1
  new Simple3D({ modelPath, resourcePath, panel, infoPanel, progress, getModalInfo });
};

window.onload = onload;
